Jquery smartSelects plugin

Use to create more intelligent dropdown select, support ajax data resource.

Load

1
git clone https://github.com/lizus/jquery.smartSelects.git

after download, see dist/index.html for more detail.

Sample html code

1
2
3
4
5
6
<div class="smartSelect" data-component="smartSelect" data-total="2" data-row="10">
  <textarea class="smartSelect-value hidden" data-type="jsonp" data-field="value" name="sample"></textarea>
  <textarea class="smartSelect-source hidden" data-type="jsonp" data-field="source"></textarea>
  <input class="smartSelect-ajax hidden" type="hidden" data-type="string" data-field="ajax" value="https://sample.com" />
  <ul class="selected-ul" data-field="selected"></ul>
</div>

Specification

  • data-component="smartSelect" component identify code, if use it before us, it will auto load. else use $(this).smartSelect(); load
  • data-total="2" the max select option count
  • data-row="10" only ajax use. if less then settled value(10), it will get new value from ajax
  • data-field="value" selected value. jsonp string, decode sample:
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    [
      {
        key: 'hello',
        value: 'world'
      },
      {
        key: 'hello',
        value: 'world'
      },
    ]
  • data-field="source" select option resource, format as value
  • data-field="ajax" ajax resource url,only support get method. If get values, it will settle data-field="ajax-source",data-ajax-source="{search keyword}"
  • data-field="selected" the display element for selected value

Events

when click: selected-click
when input change: selected-change
when leave: selected-leave
when selected-click, it will set data-status="active" to the main component to tag the activity status.
when selected-leave, it will set data-status="leave" to the main component to tag the leave status.

javascript jquery plugin